<template>
  <div>
    <el-dialog :title="$t('action.add')" width="70%" class="icon-dialog" :visible.sync="show" @open="open" :before-close="closeForm" append-to-body>
      <el-form :size="size" ref="form" :model="form" :rules="rules" :label-width="$store.getters.device !== 'mobile'?'16%':'90px'">
        <el-row >
          <el-col :span="6">
            <el-form-item :label="$t('field.WorkSetting_fnumber')" prop="fnumber">
              <el-input v-model="form.fnumber" autoComplete="off" clearable  :placeholder="$t('system.pleaseInput',{title:$t('field.WorkSetting_fnumber')})">
              </el-input>
            </el-form-item>
          </el-col>
          <!--				 </el-row>-->
          <!--	 				 <el-row >-->
          <el-col :span="8">
            <el-form-item :label="$t('field.WorkSetting_fbillno')" prop="fbillno">
              <el-input v-model="form.fbillno" autoComplete="off" clearable  :placeholder="$t('system.pleaseInput',{title:$t('field.WorkSetting_fbillno')})">
              </el-input>
            </el-form-item>
          </el-col>
          <!--        				 </el-row>-->
          <!--	 				 <el-row >-->
          <el-col :span="7">
            <el-form-item :label="$t('field.WorkSetting_fname')" prop="fname">
              <el-input v-model="form.fname" autoComplete="off" clearable  :placeholder="$t('system.pleaseInput',{title:$t('field.WorkSetting_fname')})">
              </el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row >
          <el-col :span="7">
            <el-form-item :label="$t('field.WorkSetting_fcustomer')" prop="fcustomer">
              <el-input v-model="form.fcustomer" autoComplete="off" clearable  :placeholder="$t('system.pleaseInput',{title:$t('field.WorkSetting_fcustomer')})">
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="7">
            <el-form-item :label="$t('field.WorkSetting_fvs')" prop="fvs">
              <el-input v-model="form.fvs" autoComplete="off" clearable  :placeholder="$t('system.pleaseInput',{title:$t('field.WorkSetting_fvs')})">
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="10">
            <el-form-item :label="$t('field.WorkSetting_fvcom')" prop="fvcom">
              <el-input v-model="form.fvcom" autoComplete="off" clearable  :placeholder="$t('system.pleaseInput',{title:$t('field.WorkSetting_fvcom')})"></el-input>
            </el-form-item>
          </el-col>
          <!--				 </el-row>-->
          <!--        	 				 <el-row >-->
          <el-col :span="8">
            <el-form-item :label="$t('field.WorkSetting_fheader')" prop="fheader">
              <el-input v-model="form.fheader" autoComplete="off" clearable  :placeholder="$t('system.pleaseInput',{title:$t('field.WorkSetting_fheader')})">
              </el-input>
            </el-form-item>
          </el-col>
          <!--        				 </el-row>-->
          <!--	 				 <el-row >-->
          <el-col :span="10">
            <el-form-item :label="$t('field.WorkSetting_ftype')" prop="ftype">
              <el-select v-model="form.ftype" placeholder="请选择活动区域">
                <el-option label="普通工单" value="0"></el-option>
                <el-option label="紧急工单" value="1"></el-option>
              </el-select>
              <!--            <el-input v-model="form.ftype" autoComplete="off" clearable  :placeholder="$t('system.pleaseInput',{title:$t('field.WorkSetting_ftype')})">-->
              <!--            </el-input>-->
            </el-form-item>
          </el-col>
        </el-row>
        <el-row >
          <el-col :span="8">
            <el-form-item :label="$t('field.WorkSetting_fnote')" prop="fnote">
              <el-input style="width: 500px" type="textarea" v-model="form.fnote" autoComplete="off" clearable  :placeholder="$t('system.pleaseInput',{title:$t('field.WorkSetting_fnote')})">
              </el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row >
					<el-col :span="24">
						<el-form-item :label="$t('field.WorkSetting_ftupian')" prop="ftupian">
							<ImagesUpload size="small"  fileType="images" :images.sync="form.ftupian"></ImagesUpload>
						</el-form-item>
					</el-col>
				 </el-row>
	 				 <el-row >
					<el-col :span="24">
						<el-form-item :label="$t('field.WorkSetting_flabxz')" prop="flabxz">
              <el-select v-model="form.flabxz" placeholder="请选择lab" @change="onMidChange">
                <el-option label="1" value="1"></el-option>
                <el-option label="2" value="2"></el-option>
                <el-option label="3" value="3"></el-option>
              </el-select>
<!--							<el-input v-model="form.flabxz" autoComplete="off" clearable  :placeholder="$t('system.pleaseInput',{title:$t('field.WorkSetting_flabxz')})">-->
<!--							</el-input>-->
						</el-form-item>
					</el-col>
				 </el-row>
        <el-row >
          <el-col :span="24">
            <el-form-item label="lab内容" prop="labtx" v-if="!ceshi">
              <el-input v-model="labtx" v-if="!ceshi1" autoComplete="off" clearable  placeholder="lab填写"></el-input>
              <el-input v-model="labtx" v-if="!ceshi2" autoComplete="off" clearable  placeholder="lab填写"></el-input>
              <el-input v-model="labtx" v-if="!ceshi3" autoComplete="off" clearable  placeholder="lab填写"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
	 				 <el-row >
					<el-col :span="24">
						<el-form-item :label="$t('field.WorkSetting_fbxtype')" prop="fbxtype">
              <el-select v-model="form.fbxtype" placeholder="波形类型选择">
                <el-option label="vs波形" value="1"></el-option>
                <el-option label="测试波形" value="2"></el-option>
                <el-option label="vs和测试波形" value="3"></el-option>
              </el-select>
<!--							<el-input v-model="form.fbxtype" autoComplete="off" clearable  :placeholder="$t('system.pleaseInput',{title:$t('field.WorkSetting_fbxtype')})">-->
<!--							</el-input>-->
						</el-form-item>
					</el-col>
				 </el-row>
				</el-form>
      <el-dialog title="vs波形选择"  :visible.sync="vsShow" center width="1000px" top="70px" :append-to-body="true" :close-on-press-escape="true" :close-on-click-modal="false">

        <el-table :data="vsShowList"  class="detail" height="60vh" @selection-change="handleSelectionChange">
          <el-table-column type="selection"></el-table-column>
          <el-table-column label="#" width="40" align="center" type="index"></el-table-column>
          <el-table-column prop="vsName" label="波形名称"></el-table-column>
          <el-table-column prop="vsNumber" label="波形编号"></el-table-column>
          <el-table-column prop="fvcom" label="VCom值"></el-table-column>
          <el-table-column prop="wendu" label="温度"></el-table-column>
          <el-table-column prop="dianya" label="电压"></el-table-column>
          <el-table-column prop="fngtype" label="甩线类型"></el-table-column>
          <el-table-column prop="fresidtime" label="存放时间" ></el-table-column>
          <el-table-column prop="frefreshtime" label="嵌入式刷新时间" ></el-table-column>
          <el-table-column prop="ftuopanqty" label="测试托盘数量" ></el-table-column>
        </el-table>
        <div style="display: flex; justify-content: center; margin-top: 10px">
          <el-button type="success" @click="dataToInfo()">添加</el-button>
          <el-button @click="vsShow = false" type="info">关闭</el-button>
        </div>
      </el-dialog>
      <template>
        <div>VS波形设置</div>
        <el-button type="success"  size="mini" icon="el-icon-plus"  @click="addwave()" >增加</el-button>
      </template>
      <el-table :data ="vslist" style="width: 100%">
        <el-table-column label="No." width="60" align="right" type="index"></el-table-column>
        <el-table-column prop="vsNumber" align="center" label="编号" width="120"></el-table-column>
        <el-table-column prop="vsName" align="center" label="名称" width="120"></el-table-column>
        <el-table-column prop="fvcom" align="center" label="VCom值" width="120"></el-table-column>
        <el-table-column prop="wendu" align="center" label="温度" width="120"></el-table-column>
        <el-table-column prop="dianya" align="center" label="电压范围" width="120"></el-table-column>
        <el-table-column prop="boxing" align="center" label="波形" width="120"></el-table-column>
        <el-table-column prop="Fresidtime" align="center" label="刷新时间" width="120"></el-table-column>
        <el-table-column prop="ftuopanqty" align="center"label="托盘数量" width="120"></el-table-column>
        <el-table-column prop="fbillno" align="center"label="操作" width="120">
          <template slot-scope="scope">
            <!--            <div v-if="scope.row.id">-->
            <!--              <el-button size="mini" type="primary"><i class="el-icon-edit" @click="addvswave(ids)" v-if="checkPermission('/app/Vswave/add.html')" />{{$t('action.update')}}</el-button>-->
            <el-button size="mini" type="danger" @click="handlevsDelete(scope.$index)" ><i class="el-icon-delete" />{{$t('action.delete')}}</el-button>
            <!--            </div>-->
          </template>
        </el-table-column>
      </el-table>

      <el-dialog title="测试波形选择"  :visible.sync="testShow" center width="1000px" top="70px" :append-to-body="true" :close-on-press-escape="true" :close-on-click-modal="false">

        <el-table :data="testShowList"  class="detail" height="60vh" @selection-change="testHandleSelectionChange">
          <el-table-column type="selection"></el-table-column>
          <el-table-column label="#" width="40" align="center" type="index"></el-table-column>
          <el-table-column prop="vsName" label="波形名称"></el-table-column>
          <el-table-column prop="vsNumber" label="波形编号"></el-table-column>
          <el-table-column prop="fvcom" label="VCom值"></el-table-column>
          <el-table-column prop="wendu" label="温度"></el-table-column>
          <el-table-column prop="dianya" label="电压"></el-table-column>
          <el-table-column prop="fngtype" label="甩线类型"></el-table-column>
          <el-table-column prop="Fresidtime" label="存放时间" ></el-table-column>
          <el-table-column prop="Frefreshtime" label="嵌入式刷新时间" ></el-table-column>
          <el-table-column prop="ftuopanqty" label="测试托盘数量" ></el-table-column>
        </el-table>
        <div style="display: flex; justify-content: center; margin-top: 10px">
          <el-button type="success" @click="dataToTestInfo()">添加</el-button>
          <el-button @click="testShow = false" type="info">关闭</el-button>
        </div>
      </el-dialog>
      <template>
        <div>测试波形设置</div>
        <el-button type="success"  size="mini" icon="el-icon-plus" @click="addCeshi()">增加</el-button>
      </template>
      <el-table :data ="testlist" style="width: 100%">
        <el-table-column label="No." width="60" align="right" type="index"></el-table-column>
        <el-table-column prop="vsNumber" align="center" label="编号" width="120"></el-table-column>
        <el-table-column prop="vsName" align="center" label="名称" width="120"></el-table-column>
        <el-table-column prop="fvcom" align="center" label="VCom值" width="120"></el-table-column>
        <el-table-column prop="wendu" align="center" label="温度" width="120"></el-table-column>
        <el-table-column prop="dianya" align="center" label="电压范围" width="120"></el-table-column>
        <el-table-column prop="boxing" align="center" label="波形" width="120"></el-table-column>
        <el-table-column prop="Fresidtime" align="center" label="刷新时间" width="120"></el-table-column>
        <el-table-column prop="ftuopanqty" align="center"label="托盘数量" width="120"></el-table-column>
        <el-table-column prop="fbillno" align="center"label="操作" width="120">
          <template slot-scope="scope">
            <!--            <div v-if="scope.row.id">-->
            <!--              <el-button size="mini" type="primary"><i class="el-icon-edit" />{{$t('action.update')}}</el-button>-->
            <el-button size="mini" type="danger"  @click="handleDelete(scope.$index)" ><i class="el-icon-delete" />{{$t('action.delete')}}</el-button>
            <!--            </div>-->
          </template>
        </el-table-column>
      </el-table>
      <div slot="footer" class="dialog-footer">
        <el-button :size="size" :loading="loading" type="primary" @click="submit" >
          <span v-if="!loading">{{$t('system.confirm')}}</span>
          <span v-else>{{$t('system.submitting')}}</span>
        </el-button>
        <el-button :size="size" @click="closeForm">{{$t('system.cancel')}}</el-button>
      </div>
    </el-dialog>
    <!--添加-->
    <Add  :show.sync="dialog.addDialogStatus" size="small" @refresh_list="index"></Add>
  </div>
</template>
<script>
import { add } from '@/api/app/worksetting'
import ImagesUpload from '@/components/common/ImagesUpload.vue'
import {getList} from "@/api/app/vswave";
import {getTestWaveList} from "@/api/app/testwave";
import Add from '@/views/app/vswave/add.vue'
import index from "vuex";


export default {
  name: 'workSettingadd',
  computed: {
    index() {
      return index
    }
  },
  components: {
    ImagesUpload, Add
  },
  props: {
    show: {
      type: Boolean,
      default: false
    },
    size: {
      type: String,
      default: 'small'
    },
    querys: {
      type: Object,
    },
  },
  data() {
    return {
      dialog: {
        addDialogStatus: false,
      },
      //输入框隐藏
      ceshi: true,
      ceshi1: true,
      ceshi2: true,
      ceshi3: true,
      form: {
        fnumber: '',
        fbillno: '',
        fname: '',
        fcustomer: '',
        fheader: '',
        ftype: '',
        fnote: '',
        fvs: '',
        fvcom: '',
        ftupian: [],
        flabxz: '',
        fbxtype: '',
      },
      initial: {},
      loading: false,
      addInfo: {},
      rules: {},
      vslist: [],
      testlist: [],
      vsShow: false,
      testShow: false,
      testShowList: [],
      vsShowList: [],
      multipleSelection: [],
      testMultipleSelection: []
    }
  },
  watch: {
    show(val) {
      if (val) {
      }
    }
  },
  methods: {
    //lab选择 
    onMidChange(e) {
      this.ceshi = false
      if (e == '1') {
        this.ceshi1 = false
        this.ceshi2 = true
        this.ceshi3 = true
      } else if (e == '2') {
        this.ceshi1 = false
        this.ceshi2 = false
        this.ceshi3 = true
      } else if (e == '3') {
        this.ceshi1 = false
        this.ceshi2 = false
        this.ceshi3 = false
      }
    },
    dataToTestInfo() {
      if (this.testMultipleSelection.length === 0) {
        ElMessage.error('请选择波形！')
        return
      }
      this.testShow = false
      this.testMultipleSelection.forEach(value => {
        this.testlist.push({
          vsNumber: value.vsNumber,
          vsName: value.vsName,
          vsid: value.vsid,
          boxing: value.boxing,
          dianya: value.dianya,
          fngtype: value.fngtype,
          Fresidtime: value.fresidtime,
          Frefreshtime: value.frefreshtime,
          ftuopanqty: value.ftuopanqty,
          fid: value.id,
          fpictureId: value.fpictureId,
          femperature: value.wendu
        })
      })
    },
    testHandleSelectionChange(val) {
      this.testMultipleSelection = val
    },
    //打开测试波形列表
    addCeshi() {
      getTestWaveList().then(res => {
        if (res.status == 200) {
          this.testShow = true
          this.testShowList = res.data
        }
      })
    },
    dataToInfo() {
      if (this.multipleSelection.length === 0) {
        ElMessage.error('请选择波形！')
        return
      }
      this.vsShow = false
      this.multipleSelection.forEach(value => {
        this.vslist.push({
          vsNumber: value.vsNumber,
          vsName: value.vsName,
          vsid: value.vsid,
          boxing: value.boxing,
          dianya: value.dianya,
          fngtype: value.fngtype,
          Fresidtime: value.fresidtime,
          Frefreshtime: value.frefreshtime,
          ftuopanqty: value.ftuopanqty,
          fid: value.id,
          fpictureId: value.fpictureId,
          femperature: value.wendu
        })
      })
    },
    handleSelectionChange(val) {
      this.multipleSelection = val
    },
    open() {
      if (this.querys) {
      }
    },
    //vs波形添加
    addwave() {
      getList().then(res => {
        if (res.status == 200) {
          this.vsShow = true
          this.vsShowList = res.data
        }
      })
    },
    //删除vs行
    handlevsDelete(index) {
      this.vslist.splice(index, 1);
    },

    //删除test行
    handleDelete(index) {
      this.testlist.splice(index, 1);
    },
    submit() {
      this.$refs['form'].validate(valid => {
        if (valid) {
          this.loading = true
          add({header: this.form, datavslist: this.vslist, datatestlist: this.testlist}).then(res => {
            if (res.status == 200) {
              this.$message({message: this.$t('system.success'), type: 'success'})
              this.$emit('refresh_list')
              this.closeForm()
            }
          }).catch(() => {
            this.loading = false
          })
        }
      })
    },
    //关闭窗口时删除vslist，testlist的值
    closeForm() {
      this.$emit('update:show', false)
      this.loading = false
      this.vslist.splice(index);
      this.testlist.splice(index);
      if (this.$refs['form'] !== undefined) {
        this.$refs['form'].resetFields()
      }
    },
  },
  mounted() {

  },
}
</script>
<style scoped lang="scss">
@import '@/assets/scss/common.scss';
</style>
